<template>
  <div class="dashboard-charts-row">
    <ChartCard title="医生满意度排行">
      <DoctorRankList :doctor-list="doctorList" />
    </ChartCard>
    <ChartCard title="预约状态分布" :actions="['近3日', '近7日']" :activeAction="activeTab" @action="changeTab">
      <v-chart :option="lineOption" autoresize style="height:220px;" />
    </ChartCard>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import ChartCard from './ChartCard.vue'
import DoctorRankList from './DoctorRankList.vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
use([CanvasRenderer, LineChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])

const props = defineProps<{ doctorList: any[] }>()

const activeTab = ref('近3日')
const changeTab = (tab: string) => {
  activeTab.value = tab
}

const data3 = [
  { date: '06-10', value: 120 },
  { date: '06-11', value: 150 },
  { date: '06-12', value: 98 }
]
const data7 = [
  { date: '06-06', value: 80 },
  { date: '06-07', value: 110 },
  { date: '06-08', value: 90 },
  { date: '06-09', value: 130 },
  { date: '06-10', value: 120 },
  { date: '06-11', value: 150 },
  { date: '06-12', value: 98 }
]
const lineOption = computed(() => {
  const data = activeTab.value === '近3日' ? data3 : data7
  return {
    tooltip: { trigger: 'axis' },
    xAxis: { type: 'category', data: data.map(d => d.date) },
    yAxis: { type: 'value' },
    series: [
      {
        data: data.map(d => d.value),
        type: 'line',
        smooth: true,
        areaStyle: { color: '#e3f2fd' },
        lineStyle: { color: '#1976d2', width: 3 },
        symbol: 'circle',
        symbolSize: 10
      }
    ]
  }
})
</script>
<script lang="ts">
export default {}
</script>
<style scoped>
.dashboard-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .dashboard-charts-row {
    grid-template-columns: 1fr;
  }
}
</style> 